<template>
    <el-form
      ref="ruleFormRef"
      style="max-width: 600px"
      :model="ruleForm"
      :rules="rules"
      label-width="auto"
      class="demo-ruleForm"
      :size="formSize"
      status-icon
    >
      <el-form-item label="用户名" prop="name">
        <el-input v-model="ruleForm.userName" />
      </el-form-item>
      <el-form-item label="昵称" prop="name">
        <el-input v-model="ruleForm.nickName" />
      </el-form-item>
      <el-form-item label="密码" prop="name">
        <el-input type="password" v-model="ruleForm.password" />
      </el-form-item>
      <el-form-item label="手机号" prop="name">
        <el-input v-model="ruleForm.phone" />
      </el-form-item>
      <el-form-item label="邮件" prop="name">
        <el-input v-model="ruleForm.email" />
      </el-form-item>
      <el-form-item label="角色" prop="name">
         <el-checkbox-group v-model="ruleForm.roleIds">
          <el-checkbox v-for="item in role"  :label="item.roleName" :value="item.roleId" />
        </el-checkbox-group>
      </el-form-item>
      
      <el-form-item>
        <el-button type="primary" @click="submitForm(ruleFormRef)">
          Create
        </el-button>
        <el-button @click="resetForm(ruleFormRef)">Reset</el-button>
      </el-form-item>
    </el-form>
  </template>
  
  <script lang="ts" setup>
  import { reactive, ref,onMounted } from 'vue'
  import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
  import { ElMessage } from 'element-plus'
  import axios from 'axios'
  
  interface RuleForm {
    userName: string,
    nickName: string,
  password: string,
  phone: string,
  email: string,
  roleIds: []
  }
  
  const formSize = ref<ComponentSize>('default')
  const ruleFormRef = ref<FormInstance>()
  const ruleForm = reactive<RuleForm>({
    userName: "",
    nickName: "",
  password: "",
  phone: "",
  email: "",
  roleIds: []
  })
  
  const locationOptions = ['Home', 'Company', 'School']
  
  const rules = reactive<FormRules<RuleForm>>({})
  
  const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
      if (valid) {
      axios.post('/api/User/UserAdd',ruleForm)
      .then(res=>{
        if(res.data.isSuc)
        {
            ElMessage.success(res.data.msg);
        }
        else
        {
            ElMessage.error(res.data.msg);
        }
      })
      } else {
        console.log('error submit!', fields)
      }
    })
  }
  
  const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
  }

interface Role{
    roleId: 1,
      roleName: ""
}
const role=ref<Role[]>([])
  onMounted(()=>{
    axios.get('/api/User/GetRole')
    .then(res=>{
        role.value=res.data.data;
    })
  })

  </script>
  